<template>
<div class="vechile-detail-container container-1200">
    <div class="wy-main-title wy-m-t-20">
          <p>首页  /  物流信息服务  /   <span>车源信息</span>   /   {{detail.beginPlace}}——{{detail.endPlace}}</p>
    </div>
    <div class="goods-detail-leftInformaion">
          <div class="goods-city-information">
              <h2>{{detail.beginPlace}}——{{detail.endPlace}}</h2>
              <div>
                      <span>发布时间：{{detail.createTime}}</span>
                      <span>浏览量:{{detail.looksNum}}次</span>
              </div>
          </div>
         <!-- 列表 -->
          <div class="goods-list-detail">
            <ul>
              <li class="ant-list-item">
                   <div class="ant-list-item-content ant-list-item-content-single">
                     <div class="Infor-title">出发地</div>
                     <div class="Infor-cont wy-text-nowrap"> {{detail.beginPlace || '暂无'}}</div>
                   </div>
              </li>
              <li class="ant-list-item">
                   <div class="ant-list-item-content ant-list-item-content-single">
                     <div class="Infor-title">到达地</div>
                     <div class="Infor-cont wy-text-nowrap"> {{detail.endPlace || '暂无'}}</div>
                   </div>
              </li>
              <li class="ant-list-item">
                   <div class="ant-list-item-content ant-list-item-content-single">
                     <div class="Infor-title">途径地名</div>
                     <div class="Infor-cont wy-text-nowrap"> {{detail.middlePlace || '暂无'}}</div>
                   </div>
              </li>
              <li class="ant-list-item">
                   <div class="ant-list-item-content ant-list-item-content-single">
                     <div class="Infor-title">车牌号</div>
                     <div class="Infor-cont wy-text-nowrap"> {{detail.licence || '暂无'}}<a href="/login" style="margin-left: 10px" v-if="!loggedIn">登录查看</a></div>
                   </div>
              </li>
              <li class="ant-list-item">
                   <div class="ant-list-item-content ant-list-item-content-single">
                      <div class="Infor-title">车源类型</div>
                      <div class="Infor-cont" v-if="detail.type == 0">本地车</div>
                      <div class="Infor-cont" v-if="detail.type == 1">回程车</div>
                   </div>
              </li>
              <li class="ant-list-item">
                   <div class="ant-list-item-content ant-list-item-content-single">
                      <div class="Infor-title">车辆类型</div>
                      <div class="Infor-cont">
                        <!-- 本地车 -->
                       {{detail.vehicleTypeValue}}
                       </div>
                   </div>
              </li>
              <li class="ant-list-item">
                   <div class="ant-list-item-content ant-list-item-content-single">
                     <div class="Infor-title">车长</div>
                     <div class="Infor-cont">{{detail['length']  || '暂无'}} <span v-if="detail['length']">米</span></div>
                   </div>
              </li>
              <li class="ant-list-item">
                   <div class="ant-list-item-content ant-list-item-content-single">
                     <div class="Infor-title">载重</div>
                     <div class="Infor-cont">{{detail.weight || '暂无'}}<span v-if="detail.weight">吨</span></div>
                   </div>
              </li>
              <li class="ant-list-item">
                   <div class="ant-list-item-content ant-list-item-content-single">
                      <div class="Infor-title">运价</div>
                      <div class="Infor-cont"> {{detail.expectedPriceDisplay || '面议'}}<span v-if="detail.expectedPrice">元</span></div>
                   </div>
              </li>
              <li class="ant-list-item">
                   <div class="ant-list-item-content ant-list-item-content-single">
                      <div class="Infor-title">随车联系人</div>
                      <div class="Infor-cont"> {{detail.driverName || '暂无'}}<a href="/login" style="margin-left: 10px" v-if="!loggedIn">登录查看</a></div>
                      <!-- <div class="Infor-cont" v-if="loggedIn"> {{detail.driverName || '暂无'}}</div> -->
                      <!-- <div class="Infor-cont" v-if="!loggedIn">登录后可查看</div> -->
                   </div>
              </li>
              <li class="ant-list-item">
                   <div class="ant-list-item-content ant-list-item-content-single">
                      <div class="Infor-title">联系电话</div>
                      <div class="Infor-cont" > {{detail.driverMobile || '暂无'}}<a href="/login" style="margin-left: 10px" v-if="!loggedIn">登录查看</a></div>
                      <!-- <div class="Infor-cont" v-if="loggedIn"> {{detail.driverMobile || '暂无'}}</div> -->
                      <!-- <div class="Infor-cont" v-if="!loggedIn">登录后可查看</div> -->
                   </div>
              </li>
              <li class="ant-list-item">
                   <div class="ant-list-item-content ant-list-item-content-single">
                     <div class="Infor-title">发车时间</div>
                     <div class="Infor-cont" > {{detail.releaseDate&&detail.releaseDate.split(' ')[0] || '暂无'}}</div>
                   </div>
              </li>
              <li class="ant-list-item">
                   <div class="ant-list-item-content ant-list-item-content-single">
                     <div class="Infor-title">有效期</div>
                     <div class="Infor-cont"> {{detail.validityDay || '暂无'}}<span v-if="detail.validityDay">天</span></div>

                   </div>
              </li>
              <li class="ant-list-item">
                   <div class="ant-list-item-content ant-list-item-content-single">
                     <div class="Infor-title">说明</div>
                     <div class="Infor-cont  wy-text-nowrap">{{detail.remarks || '暂无'}}</div>
                   </div>
              </li>
            </ul>
            <p><i>*</i>温馨提示：联系我时，请说明是从云南国际物流云上看到的信息，谢谢</p>
          </div>
           <!-- 车源评价 -->
          <div class="goods-sourceEvaluation">
                <div class="goods-title-750">
                    车源评价
                    <a href="javascript:;"  @click="watchEval" v-if="loggedIn">查看全部评价</a>
                    <router-link v-if="!loggedIn" to="/login">查看全部评价</router-link>
                </div>
                <div class="goods-sourceDetail">
                      <p>以下是此车源的短评词条，联系该车源后点击添加您的印象。</p>
                      <div class="v-tag">
                         <!--  <a-tag v-for="(item,index) in tagsData" :key="index" @click="tagevClick(index)" :class="item.class">{{item.name}}</a-tag> -->
                       <span v-for="(item,index) in tagsData" :key="index" @click="tagevClick(index)" class="ant-tags" :class="item.class">{{item.name}}</span>
                        <a-textarea placeholder="请写下您的宝贵意见，您的真实、有效评价可以帮助其他人哦" v-model="tagsEvent"></a-textarea>
                      </div>
                      <div class="goods-btn-search">
                          <router-link v-if="!loggedIn" to="/login"> 
                              <a-button type="danger">提交评价</a-button>
                          </router-link>
                          <a-button type="danger" @click="evaluationInterface" v-if="loggedIn">提交评价</a-button>
                      </div>
                </div>
          </div>
         <!-- 评价列表 -->
          <div class="evaluation-box" v-show="zhanShi">
                <div class="eval-title">
                     <span>全部评价</span>
                     <i @click="disapperarClick"> 
                      <img src="./../../.././static/img/info/quxiao.png" alt="" />
                    </i>
                </div>
                <a-list :dataSource="evalLists" class="eval-list" :pagination="pagination"> 
                    <a-list-item slot="renderItem" slot-scope="item, index">
                        <div>用户名：{{item.userName || '暂无'}}</div>
                        <div>评价：{{item.content || '暂无'}}</div>
                        <div>{{item.createTime&&item.createTime.split(' ')[0]}}</div>
                    </a-list-item>
                </a-list>
          </div>
        <!-- 车辆简介 -->
          <div class="goods-company-detail">
                <div class="goods-title-750">
                    车辆简介
                    <nuxt-link :to="`./../../corp`">进入企业主页</nuxt-link>
                </div>
                <div class="goods-company-content">
                    <div class="vehicle-pic">
                      <page-carousel v-if="detail.vehiclePics.split(',').length>1" :carouselList="detail.vehiclePics.split(',')"></page-carousel>
                      <img class="good-only-pic" v-if="detail.vehiclePics.split(',').length==1" :src="FileUploadUrl2+detail.vehiclePics">
                      <!-- <page-carousel v-if="detail.vehiclePics.split(',').length>1" :carouselList="detail.vehiclePics.split(',')"></page-carousel>
                      <img :src="FileUploadUrl2+detail.vehiclePics"> -->
                    </div>
                    <div class="vehicle-content">
                      <p> {{detail.vehicleRemarks || '暂无'}}</p>
                    </div>
                </div>
          </div>
        <!-- 智能车源 -->
          <div class="v-recommend">
                <div class="goods-title-750">
                    智能推荐车源
                </div>
               <!-- 车源列表 -->
                <div class="v-carList">
                    <!-- <a-table :columns="columns" :dataSource="recodata" :pagination='false'>
                            <a slot="action" slot-scope="text" href="javascript:;">查看详情</a>
                     </a-table> -->
                      <div class="v-car-list">
                         <ul>
                            <li>出发地-到达地</li>
                            <li>车牌号</li>
                            <li>车源类型</li>
                            <li>车长</li>
                            <li>载重</li>
                            <li>发布时间</li>
                            <li>查看</li>
                         </ul>
                      </div>
                      <div class="v-car-listTitle"  v-for="(item,index) in recodata" :key="index">
                          <div>
                              <p>{{item.beginPlace}}</p>
                              <p>{{item.endPlace}}</p>
							  <!-- <p>{{item.departureProvince}}{{item.departureCity}}{{item.departureArea}}</p>
							  <p>{{item.destinationProvince}}{{item.destinationCity}}{{item.destinationArea}}</p> -->
                          </div>
                          <div>{{item.licence}}</div>
                          <div v-if="item.type == 0">本地车</div>
                          <div v-if="item.type == 1">回程车</div>
                          <div>{{item['length']}}米</div>
                          <div>{{item.weight}}吨</div>
                          <div>{{item.releaseDate&&item.releaseDate.split(' ')[0]}}</div>
                          <div> 
                            <nuxt-link :to="`./${item.vehicleinfoId}`">查看详情</nuxt-link>
                          </div>
                      </div>
                </div>
                <div class="v-re-btn">
                  <a-button v-if="loggedIn&&loggedUser.attestationStatus==111" class='wy-m-b-15 wy-m-t--10' type="primary" @click="elasticShowModal(detail.userId)">立即沟通</a-button>
                  <a-button v-if="loggedIn&&loggedUser.attestationStatus!=111" class='wy-m-b-15 wy-m-t--10' type="primary" @click="TipsShowModal(detail.userId)">立即沟通</a-button>
                  <router-link v-if="!loggedIn" to="/login">
                      <a-button class='wy-m-b-15 wy-m-t--10' type="primary">立即沟通</a-button>
                  </router-link>
              </div>
          </div>
    </div>
   <!-- 右边 -->
    <div class="goods-concat">
        <div class="tnder-main-title">联系方式</div>
        <div class="concat-content">
            <h3>{{concatDetail.company}}</h3>
            <div v-if="concatDetail.starLevel">
                <span>用户星级</span>
                <a-rate :defaultValue="concatDetail.starLevel" disabled allowHalf />
            </div>
        </div>
        <div class="concat-renzhen">{{concatDetail.attestationStatusValue}}</div>
        <!-- 分割线 -->
        <div class="concat-line"></div>
        <p>公司地址：{{concatDetail.companyAddress || '暂无'}}</p>
        <p>详细地址：{{concatDetail.detailAddress || '暂无'}}</p>
        <p>成立时间：{{concatDetail.companyCreateTime&&concatDetail.companyCreateTime.split(' ')[0]}}</p>
        <p>联系人：{{concatDetail.legalPerson || '暂无'}}</p>
        <div class="otehr-product-information">
            <div class="tnder-main-title">公司其他车源信息</div>
            <div class="other-product-lsit">
               <ul>
                  <li v-for="(item,index) in details" :key="index">
                    <nuxt-link :to="`./${item.vehicleinfoId}`">
                      <div class="other-pic">
                         <img :src="FileUploadUrl2+item.vehiclePics">
                      </div>
                      <div class="other-val">{{item.vehicleTypeValue}}</div>
                    </nuxt-link>
                  </li>
               </ul>
            </div>
        </div>
    </div>
       <!-- 弹框 -->
    <Elastic :type="type"  ref='elastic'></Elastic>
      <!-- 提示认证弹框 -->
    <Elastics  ref='elastics'></Elastics>
</div>
</template>

<script>
import PageCarousel from '@/components/ui/GoodsPageCarousel'
import Elastic from '@/components/dialog/Elastic'
import Elastics from '@/components/dialog/Elastics'
import { environment } from '@/server/environment'
import AuthMixin from '~/mixins/auth'
export default {
    mixins: [ AuthMixin ],
    components: {
      PageCarousel,
      Elastic,
      Elastics
    },
    async asyncData ({ app, $axios, params, query, error }) {
        const returnData = {}
        const id = params.id
        try {
            const { data } = await $axios.$get('/api/info/infoVehicleinfo/open/getVehicleinfoDeTail/'+id, { params: {} })
            returnData.detail = data;
        } catch (err) {
            return error({ statusCode: err.code, msg: err.msg })
        }
        return returnData
    },
    data () {
      return {
        tagsEvent: '',
        type: '',
        departureProvince: '',
        destinationProvince: '',
        length:'',
        weight: '',
        licence: '',
        releaseDate:'',
        zhanShi:false,//数据列表默认状态
        expectedPrice: '',
        vehicleType: '',
        evalLists: '',// 全部评价列表
        detail: {},
        details: {},
        FileUploadUrl2:environment.FileUploadUrl2,
        tagsData: [
            {
              name:"满意",
              class: '',
            },
            {
              name:"货已发出",
              class: '',
            },
            {
              name:"电话不通",
              class: '',
            },
            {
              name:"货物运输困难",
              class: '',
            },
            {
              name:"需求货物押金",
              class: ''
            },
        ],
            // 表格分页
        pagination: {
          pageSizeOptions: ['10', '20', '30', '50', '100'],
          current: 1,
          pageSize: 5,
          // showSizeChanger: true,
          total: 0,
          showTotal: (total, range) => `共 ${total} 条记录`,
          onChange: (page) => {
              this.pagination.current = page
              this.allEvalList()
          }
        },
        beforeCreate(){
          this.form = this.$form.createForm(this);
        },
        carouselList: [
          {
            img: require('./../../../static/img/transport/avabanner.png')
          },{
            img: require('./../../../static/img/transport/avaBannerSecond.png')
          },{
            img: require('./../../../static/img/transport/avaBannerFirst.png')
          }
         ],
        recodata: {},//智能推荐车源
        concatDetail: {},//联系方式
     }
    },
    created(){
        
      if (this.detail.userId){
        this.carGetOthherById();
        this.concatUserID(this.detail.userId);
        this.infoRecomGetCargoByType();
      }
      else{
        this.carGetCargosmasterById(this.$route.params.id);
      }
    },
    watch:{
      '$route':function(){
        if(this.detail.userId){
          this.carGetOthherById();
          // this.concatUserID(this.detail.userId);
          this.infoRecomGetCargoByType();
		  this.carGetCargosmasterById(this.$route.params.id);
        }
      }
    },
    methods: {
      // 未认证弹窗
      TipsShowModal(id){
        this.$refs.elastics.warning(id);
      },
      //车源详情接口
      async carGetCargosmasterById (id) {
          const res = await this.$store.dispatch('info/carGetCargosmasterById',id)
            console.log(res,1234)
          if (res.status) {
            this.detail = res.data;
            this.concatUserID(this.detail.userId);
          } 
      },
        // 智能推荐车源
      async infoRecomGetCargoByType () {
        const res = await this.$store.dispatch('info/infoRecomGetCargoByType',{
            length: this.detail.length,
            weight: this.detail.weight,
            expectedPrice: this.detail.expectedPrice,
            vehicleType: this.detail.vehicleType,
            type: this.detail.type,
            vehicleinfoId: this.detail.vehicleinfoId,
        })
        if (res.status) {
          this.recodata = res.data.rows;
        } 
      },
      //其他产品信息
      async carGetOthherById () {
          const res = await this.$store.dispatch('info/carGetOthherById',{
              companyId: this.detail.userId,
              // vehicleinfoId: this.detail.vehicleinfoId
              vehicleinfoId: this.$route.params.id
          })
          if (res.status) {
            this.details = res.data.rows;
            this.pagination.total = res.data.total;
          } 
      },
       // 查看全部评价
      watchEval(){
         this.zhanShi = true;
         if(this.loggedIn) this.allEvalList();
      },
      // 隐藏评价列表
      disapperarClick(){
         this.zhanShi = false;
      },
       // 联系方式
      async concatUserID (id) {
          const res = await this.$store.dispatch('info/concatUserID',id)
          // if (res.status) {
            this.concatDetail = res;
            // console.log(this.concatDetail,111);
          // } 
      },
        // 评论接口
      async evaluationInterface (){
        if(this.loggedUser.attestationStatus == '111'){
             if(this.tagsEvent){
                var message = {}
                message.content = this.tagsEvent;//评论内容
                message.type = 1;//货源
                const res = await this.$store.dispatch('info/evaluationInterface',message,true)
                this.$message.success('评价成功');
                this.allEvalList();
              }else{
                this.$message.error("请输入评价内容！");
              }
        }else{
              this.$warning({
                title: '未认证无法进行评价！',
              });
        }
       
        // if (res.status) {
        // }
      },
      // 全部评价列表数据
      async allEvalList () {
          const res = await this.$store.dispatch('info/allEvalList',{
              pageSize: this.pagination.pageSize,
              pageNum: this.pagination.current,
              type:1
          });
            console.log(res,123);

          if (res.status) {
            this.evalLists = res.data.rows;
            this.pagination.total =  res.data.total;
          } 
      },
     
       //弹框展示
      elasticShowModal(id){
          this.$refs.elastic.showModal(id);
      },
       //标签事件
      tagevClick(index){
          for(var i in this.tagsData) {
            if(i == index) {
              if(!this.tagsData[i].class) {
                this.tagsData[i].class = 'tagActive'
                this.tagsEvent += this.tagsData[i].name+'，'
              }else {
                this.tagsData[i].class = ''
                this.tagsEvent = this.tagsEvent.split(this.tagsData[i].name+'，').join("");
              }
            }
        }
      }
    } 
  }
</script>
<style lang="scss">
@import "./../../../assets/css/info/vechileDetail.scss";
.v-carList{
   width: 750px;
   max-width: 400px;
   min-height: 100px;
}
.v-car-list{
    width: 750px;
    height: 40px;
    background: #F7F7F7;
    font-size: 16px;
    color: #333333;
    line-height: 40px;
    li{
      float:left;
      text-align: center;
    }
    li:nth-child(1){
      width: 200px;
    }
    li:nth-child(2){
      width: 150px;
    }
    li:nth-child(3){
      width: 100px;
    }
    li:nth-child(4){
      width: 60px;
    }
    li:nth-child(5){
      width: 60px;
    }
     li:nth-child(6){
      width: 100px;
    }
    li:nth-child(7){
      width: 75px;
    }
}
.v-car-listTitle{
    width: 750px;
    height:55px;
    text-align: center;
    line-height: 55px;
    border-bottom: 1px solid #D8D8D8;
    clear: both;
    div{
      float:left;
      height: 55px;
      text-align: center;
      font-size: 14px;
    }
    div:nth-child(1){
      width: 200px;
      line-height: 8px;
      padding-top: 10px;

    }
    div:nth-child(2){
      width: 150px;
    }
    div:nth-child(3){
      width: 100px;
    }
    div:nth-child(4){
      width: 60px;
    }
    div:nth-child(5){
      width: 60px;
    }
    div:nth-child(6){
      width: 100px;
    }
    div:nth-child(7){
      width: 75px;
      a{
         color:#15837A;
      }
    }
    
}
</style>